import '../../sass/My.scss'
import { Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';


function My() {

    let menuData = ['个人资料','我的订单','我的收藏','地址管理','安全中心']
    let navigate = useNavigate()

    let goToDetail = (index) => {
        if (index==0) {
            navigate('/PersonalMsg')
        }else if (index==1) {
            navigate('/MyTicket')
        }else if (index==2) {
            navigate('/MyCollected')
        }else if (index==3) {
            navigate('/AddressEdit')
        }else if (index==4) {
            navigate('/SafeCenter')
        }
    }
     
    return(
        <div className="my">
            <div className="top-img">
                <img className="auto-img" src={require('../../images/42.jpg')} alt="" />
            </div>
            <div className="menu">
                <div className="user-msg-wrap">
                    <div className="user-img"></div>
                    <div className="user-msg">
                        <div className="user-name">玛卡巴卡玛卡巴卡玛卡巴卡玛卡巴卡玛卡巴卡玛卡巴卡玛卡巴卡</div>
                        <div className="user-sign">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    </div>
                </div>
                <div className="menu-content">
                    {
                        menuData.map((item,index) => {
                            return (
                                <div className="menu-content-list" key={index} onClick={() => {goToDetail(index)}}>
                                    <div className="title">{item}</div>
                                    <div className="icon"><Arrow  /></div>
                                </div>
                            )
                        })
                    }
                    
                </div>
            </div>
        </div>
    )
}

export default My